<template>
    <view>
        <cf-navigation :backgroundColor="backgroundColor" :borderRadius="borderRadius" :color="color" :list="list" :scan="scan"></cf-navigation>
        <holder height="calc(var(--status-bar-height) + 66px)"></holder>
        <gap-tabs v-model="data.current" :tabs="data.tabs" :height="100" :gap="data.gap" v-if="data.show && data.tabs"></gap-tabs>
        <block v-for="(item, i) in data.naviList[data.current]?.components">
            <layout-module v-memo="[item]" :config="item.content" :key="$u.guid(4)" ref="layout" v-if="item"></layout-module>
        </block>
    </view>
</template>

<script lang="ts" setup>
import { onShow } from '@dcloudio/uni-app'
import { computed, reactive, ref } from 'vue'
import { useGlobalStore } from '@/store'

interface dataProps {
    tabs: Array<any>
    current: number
    naviList: Array<any>
    show: boolean
    upOption: any
    gap: number
    searchConfig: any
}
const data = reactive<dataProps>({
    tabs: [],
    current: 0,
    naviList: [],
    show: false,
    upOption: {
        use: false
    },
    gap: 30,
    searchConfig: {
        style: {}
    }
})
const $u = ref(uni.$u)

const globalStore = useGlobalStore()

const backgroundColor = computed(() => {
    return (data.searchConfig.style.showBackground && data.searchConfig.style.backgroundColor) || '#ffffff'
})

const list = computed(() => {
    if (!data.searchConfig.keywords) return []
    else return data.searchConfig.keywords.map((m: any) => m.keyword)
})

const height = computed(() => {
    let screenH = uni.getSystemInfoSync().safeArea?.height
    if (data.show) {
        return `calc(${screenH}px - 44px - 88rpx - 50px)`
    } else {
        return `calc(${screenH}px - 44px - 50px)`
    }
})

const color = computed(() => {
    return data.searchConfig.color || '#333'
})

const borderRadius = computed(() => {
    return data.searchConfig.style.borderRadius + 'px'
})

const scan = computed(() => {
    return data.searchConfig.showScan
})

onShow(() => {
    // let id = getApp().globalData.current
    let id = globalStore.current
    if (id) changeTab(id)
    globalStore.setCurrent(undefined)
    // getApp().globalData.current = undefined
})

uni.$u.$api.BaseApi.content().then((res: any) => {
    data.gap = res.naviSpace
    data.searchConfig = res.input
    data.tabs = res.naviList.map((m: any) => m.categoryName)
    data.naviList = res.naviList
    data.show = res.showNavigateMenu
    // this.mescroll.endSuccess();
})

function changeTab(id: string) {
    if (data.naviList.length === 0) {
        setTimeout(() => {
            changeTab(id)
        }, 200)
    } else {
        let a = data.naviList.findIndex(function (item) {
            return id === item.id
        })
        data.current = a
    }
}
</script>

<style scoped lang="scss"></style>
